<script setup>
import { ref } from "vue";
import curePannel from "./components/curePannel.vue";
// 我们的机型顶部区域适配
const { safeAreaInsets } = uni.getSystemInfoSync();

// 模拟治疗推荐的数据
const cureData = ref([
  {
    id: 0,
    dieaseName: "玉米条纹矮缩病",
    num: 5,
    imgUrl: "../../static/images/disease_kind3.webp",
    symptom:
      "病株节间缩短，植株矮缩，沿叶脉产生褪绿条纹后条纹上产生坏死褐斑。植株早期受害，生长停滞，提早枯死",
    curePro:
      "加强田间管理：一是与非茄科作物轮作。二是增施基肥，尤其是磷钾肥。合理密植，注意通风降湿，及时打枝、打杈和摘除老",
  },
  {
    id: 1,
    dieaseName: "玉米粗缩病",
    num: 3,
    imgUrl: "../../static/images/disease_kind2.webp",
    symptom:
      "植株下部膨大，节间缩短，植株矮化，粗壮，叶背、叶鞘及苞叶的叶脉上具有粗细不一的蜡白色条状突起，用手触摸有明显的粗糙不平感，谓之“脉突”。",
    curePro:
      "加强田间管理：一是与非茄科作物轮作。二是增施基肥，尤其是磷钾肥。合理密植，注意通风降湿，及时打枝、打杈和摘除老",
  },
  {
    id: 2,
    dieaseName: "玉米大斑病",
    num: 2,
    imgUrl: "../../static/images/disease_kind1.webp",
    symptom:
      "病株节间缩短，植株矮缩，沿叶脉产生褪绿条纹后条纹上产生坏死褐斑。植株早期受害，生长停滞，提早枯死",
    curePro:
      "加强田间管理：一是与非茄科作物轮作。二是增施基肥，尤其是磷钾肥。合理密植，注意通风降湿，及时打枝、打杈和摘除老",
  },
]);
</script>
<template>
  <!-- 头部导航栏开始 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <!-- 左侧回退箭头 -->
      <navigator
        url="/pages/index/index"
        open-type="switchTab"
        hover-class="navigator-hover"
      >
        <view class="left_arrow"></view>
      </navigator>
      <view>
        <text class="home">治疗推荐</text>
      </view>
    </view>

    <!-- 搜索条 -->
    <view class="search">
      <input type="text" class="icon-search" placeholder="请输入内容" />
      <text class="icon-scan"> </text>
    </view>
  </view>
  <!-- 头部导航栏结束 -->

  <scroll-view class="scrol-view" scroll-y="true">
    <!-- 组件的复用 -->
    <curePannel title="玉米条纹矮缩病" v-for="item in cureData" :key="item.id">
      <view class="cure_container">
        <!-- 上图片下文字 -->
        <view class="show_img">
          <image :src="item.imgUrl" mode="scaleToFill" />
        </view>
        <!-- 文字描述 -->
        <view class="agriculture_desc">
          <view class="desc_item">
            <text class="descs">推荐：</text>
            <uni-rate :readonly="true" :value="item.num" />
          </view>
          <view class="desc_item">
            <text class="descs">症状：</text>
            <text class="desc">{{ item.symptom }}</text>
          </view>
          <view class="desc_item">
            <text class="descs">治疗方案：</text>
            <text class="desc">{{ item.curePro }}</text>
          </view>
        </view>
      </view>
    </curePannel>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scrol-view {
  flex: 1;
  height: 100%;
}

/* 自定义导航条开始 */
.navbar {
  width: 100%;
  margin-bottom: 30rpx;
  background-color: #4dc58e;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  height: 200rpx;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    padding-top: 20rpx;
    .left_arrow {
      position: absolute;
      top: 120rpx;
      left: 30rpx;
      width: 35rpx;
      height: 35rpx;
      background: url("../../../src/static/images/left_arrow.png") no-repeat;
      background-size: cover;
    }
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      // flex: 1;
      line-height: 28rpx;
      color: #fff;
      font-family: "华文新魏";
      font-size: 50rpx;
    }
    .home {
      margin-left: 260rpx;
      color: #fff;
      font-weight: bold;
    }
  }
  .search {
    position: relative;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search[placeholder] {
    position: relative;
    padding-left: 30rpx;
    font-size: 24rpx;
  }
  .icon-scan {
    position: absolute;
    top: 10rpx;
    left: 15rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: red;
    background: url("../../static//搜索.png") no-repeat;
    background-size: cover;
  }
}
// 自定义导航条结束

// 治疗推荐样式的开始
.cure_container {
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  width: 700rpx;
  // height: 900rpx;
  background-color: #fff;
  margin-left: 25rpx;
  border-radius: 30rpx;
  overflow: hidden;
  .show_img {
    width: 650rpx;
    height: 500rpx;
    background-color: #bfa;
    border-radius: 60rpx;
    image {
      border-radius: 60rpx;
      width: 100%;
      height: 100%;
    }
  }
  .agriculture_desc {
    .desc_item:nth-child(1) {
      display: flex;
      align-items: center;
    }
    .desc_item {
      margin-bottom: 20rpx;
    }
    margin-top: 20rpx;
    .descs {
      font-size: 29rpx;
      font-weight: 500;
    }
    .desc {
      font-size: 25rpx;
      color: #333;
    }
  }
}

// 治疗推荐样式的结束
</style>
